<script src="./script.js"></script>
<style src="./style.css"></style>
<template>
  <div class="app-container">

    <div class="filter-container">

      <el-select v-model="listQuery.salesman" placeholder="请选择业务员" class="filter-item" style="width: 130px" @change="handleSearch">
        <el-option v-for="item in sales_options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>

      <el-select v-model="listQuery.operation" placeholder="业务类型" class="filter-item" style="width: 110px" @change="handleSearch">
        <el-option v-for="item in operation_options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>

      <el-select v-model="listQuery.pay_state" placeholder="付款状态" class="filter-item" style="width: 110px" @change="handleSearch">
        <el-option v-for="item in pay_options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>

      <el-select v-model="listQuery.state" placeholder="付款单状态" class="filter-item" style="width: 120px" @change="handleSearch">
        <el-option v-for="item in state_options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>

      <el-date-picker
        v-model="datetime"
        range-separator="至"
        start-placeholder="创建开始时间"
        end-placeholder="创建结束时间"
        type="daterange"
        :picker-options="pickerOptions"
        :default-time="['00:00:00']"
        value-format="yyyy-MM-dd"
        class="filter-item"
        @change="handleSearch"
      />

      <el-date-picker
        v-model="pay_datetime"
        range-separator="至"
        start-placeholder="付款时间开始"
        end-placeholder="付款时间结束"
        type="daterange"
        :picker-options="pickerOptions"
        :default-time="['00:00:00']"
        value-format="yyyy-MM-dd"
        class="filter-item"
        @change="handleSearch"
      />

      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>

    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      :show-summary="statistics != null"
      :summary-method="getSummaries"
      style="width: 100%;"
    >
      <el-table-column label="编号" size="mini" prop="id" align="center" width="120">
        <template slot-scope="{row}">
          <el-link type="primary">{{ row.id }}</el-link>
        </template>
      </el-table-column>

      <el-table-column label="收款用户">
        <template slot-scope="{row}">
          <el-image
            style="width: 40px; height: 40px;"
            :src="row.avatar_url !== '' ? row.avatar_url : 'https://cdn.west.qianqianying.com/mph/user.jpg'"
          />
          <div>
            {{ row.nick_name }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="业务类型">
        <template slot-scope="{row}">
          <div v-if="row.operation == 'RETURNED'">售后退款</div>
          <div v-if="row.operation == 'COMMISSION'">会员返佣</div>
        </template>
      </el-table-column>

      <el-table-column label="业务单据">
        <template slot-scope="{row}">
          {{row.operation_id}}
        </template>
      </el-table-column>

      <el-table-column label="付款金额" prop="amount"></el-table-column>

      <el-table-column label="付款状态">
        <template slot-scope="{row}">
          <el-link v-if="row.pay_state == 'UNPAID'">未付</el-link>
          <el-link type="success" v-if="row.pay_state == 'PAID'">已付</el-link>
          <el-link type="danger" v-if="row.pay_state == 'FAIL'">付款失败</el-link>
        </template>
      </el-table-column>

      <el-table-column label="付款单状态">
        <template slot-scope="{row}">
          <el-link v-if="row.state == 'NORMAL'">正常</el-link>
          <el-link type="success" v-if="row.state == 'FINISHED'">已完成</el-link>
          <el-link type="danger" v-if="row.state == 'CLOSED'">已关闭</el-link>
        </template>
      </el-table-column>

      <el-table-column label="付款日志">
        <template slot-scope="{row}">
          <div style="color: #C03639">{{ row.pay_log }}</div>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center" width="100">
        <template slot-scope="{row}">
          {{ row.created_at }}
        </template>
      </el-table-column>

      <el-table-column label="付款时间" align="center" width="100">
        <template slot-scope="{row}">
          {{ row.paid_at  }}
        </template>
      </el-table-column>

      <el-table-column label="关闭时间" align="center" width="100">
        <template slot-scope="{row}">
          {{ row.closed_at }}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="{row}">

          <el-popconfirm
            v-if="row.state === 'NORMAL' && row.pay_state !== 'PAID'"
            title="付款一旦成功不可退回，是否确认付款？"
            @onConfirm="pay(row.id,row.amount)"
          >
            <el-button slot="reference" type="primary" size="mini">付款</el-button>
          </el-popconfirm>

          <el-popconfirm
            v-if="row.state === 'NORMAL'"
            title="付款单一旦关闭不可撤销，是否确认关闭？"
            @onConfirm="closeOrder(row.id)"
          >
            <el-button slot="reference" type="danger" size="mini">关闭</el-button>
          </el-popconfirm>

        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

  </div>
</template>
